import React from 'react'
import styles from './index.less'
import { useCanvasContext } from '@/store/hooks'
import { isImgComponent, defualtCommonStyle } from '@/constants'
import { getOnlyKey } from '@/utils'

// 默认样式
const defaultStyle = {
	...defualtCommonStyle,
}
// 拼接样式
const settings = [
	{
		value:
			'https://tse1-mm.cn.bing.net/th/id/OIP-C.oA5HPu7F4OtzbrhdT3fvJAHaNK?w=187&h=333&c=7&r=0&o=5&dpr=2&pid=1.7',
		style: defaultStyle,
	},
	{
		value:
			'https://tse2-mm.cn.bing.net/th/id/OIP-C.ovZowC-CjR-oQdhHehN4ZAHaLG?w=194&h=291&c=7&r=0&o=5&dpr=2&pid=1.7',
		style: defaultStyle,
	},
	{
		value:
			'https://tse1-mm.cn.bing.net/th/id/OIP-C.FMockWE4B78cNc-loUoSgwHaNK?w=187&h=333&c=7&r=0&o=5&dpr=2&pid=1.7',
		style: defaultStyle,
	},
]

export default function DetaiList() {
	const _canvas = useCanvasContext()

	const addCmp = _cmp => {
		_canvas.addCmp(_cmp)
	}
	const onDragStart = (e, _cmp) => {
		e.dataTransfer.setData('drag-cmp', JSON.stringify(_cmp))
	}
	return (
		<div className={styles.main}>
			<ul className={styles.box}>
				{settings.map(item => (
					<li
						onClick={() => addCmp({ ...item, type: isImgComponent })}
						className={styles.item}
						key={getOnlyKey()}
						onDragStart={e => onDragStart(e, { ...item, type: isImgComponent })}
					>
						<img src={item.value} alt="" />
					</li>
				))}
			</ul>
		</div>
	)
}
